<template>
    <div class="sdy-cart">
        <sdyHeader title="啥都有 - 购物车" back></sdyHeader>
        <van-radio class="me"  :checked="selectAll" name="1"> 全选</van-radio>
        <div class="top"
          v-for="item in list"
        :key="item.proid"
        >
            <van-radio class="select-item" @click="update(item.cartidid , item.flag)" :checked="item.flag" name="1"></van-radio>
            <ul>
                <li> 
                    <van-card
                    
                        :price="(item.originprice *item.num)"
                        desc="描述信息"
                        :title="item.proname"
                        :thumb="item.img1"
                        >
                        <template #tags>
                            <van-stepper v-model="item.num" input-width="40px" button-size="32px" />
                        </template>
                        <template #footer>
                            <van-button size="mini">按钮</van-button>
                            
                            <van-button type="success" size="small" @click="Handler(item.proid)">删除</van-button>
                        </template>
                    </van-card>
                </li>
            </ul>
        </div>
        <div class="buttom">
            总价: ￥ {{totalPrice.toFixed(2) }}
        </div>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
        <hr>
    
    
        <!-- <div class="hot">
            <div
            class="goods-item"
            v-for="item in goodList"
            :key="item.proid">
            <img :src="item.img1" alt="">
            <p class="title van-multi-ellipsis--l2">
                {{ item.proname }}
            </p>
            <p class="price">
                <span class="current">
                ￥ {{ item.issale ? (item.originprice * 10 / item.discount).toFixed(2) : item.originprice.toFixed(2) }}
                </span>
                <span class="old">
                ￥ {{ item.originprice.toFixed(2) }}
                </span>
            </p>
            <p class="tags">
                <van-tag type="danger">{{ item.category }}</van-tag>
                <van-tag type="primary">{{ item.brand }}</van-tag>
            </p>
            </div>
      
        </div> -->
  

          <van-notice-bar class="notice-swipe"
                left-icon="volume-o" :scrollable="true">
                <van-swipe
                    vertical
                    :speed="2"
                    :autoplay="1000"
                    :show-indicators="true"
                >   <div class="item">
                        <van-swipe-item>今人不见古时月，今月曾经照古人。</van-swipe-item>
                    </div>
                </van-swipe>
            </van-notice-bar>
        <Teleport to="#sdy-footer">
            <van-action-bar class="icon">
                <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
                <van-action-bar-icon icon="cart-o" @click="$router.push({path: '/order'})" text="查看订单" />
                <van-action-bar-icon icon="star" text="收藏" color="#ff5000" />
                <van-action-bar-button type="danger" @click="clickHandler" text="生成订单" />
            </van-action-bar>
        </Teleport>

          
    </div>
</template>

<script setup lang="ts">
 //验证登录
import { useRoute ,useRouter ,type Router, type RouteLocationNormalizedLoaded } from 'vue-router'
import { Dialog } from 'vant';
import {ref, onMounted ,computed , reactive} from 'vue'
import { cartListApi } from '@/api/cart'
import { addOrderApi} from '@/api/order'
import { goodsListApi } from '@/api/goodslist'
import type { MyCartItem , MyhotItem} from '@/config/interface'
import { updataApi , delCartApi } from '@/api/cart'
const $router: Router = useRouter()
const $route: RouteLocationNormalizedLoaded = useRoute()


const token  = window.localStorage.getItem('token')
const user_id  = window.localStorage.getItem('user_id')

//验证是否 有 token 和 id
const testToken = () =>{
   
    //非空验证
    if(!user_id || !token ) {
        Dialog({
            title: '提示',
            message: '你查看的商品不存在，请稍后再试。',
            }).then(() => {
                //哪来回哪去
                $router.push({ path: '/login'})
        })
        return
    }
}

const list = ref<MyCartItem[]>([])

//获取 购物车 列表
const cartList = async () =>{
    const res = await cartListApi(user_id as string )
    console.log(res)
    list.value = res.data
}

// 热门搜索 的 列表

const goodList = ref<MyhotItem[]>([])
const goodsInfo = reactive({ count: 1, limitNum: 10 })
const hotList = async() =>{
    const res = await goodsListApi(goodsInfo)
    // console.log(res)
    goodList.value = res.data
}

// 更新 购物车选中 状态
const update = async (id: string ,flag: boolean) =>{
    const res = await updataApi(id, flag)
    // console.log(res)
    if(res.code === '200'){
        cartList()
    }
}


// 删除按钮
const Handler = async (id: string ) =>{
    const res = await delCartApi(id)
    console.log(res)
    if(res.code === '200'){
        Dialog({
            title: '提示',
            message:'你确定要删除这件商品吗？'
        })
        const id = window.localStorage.getItem('proid')
        console.log(id)
        console.log(123)
        
      
    }

}


// 生成订单 
const clickHandler = async  () =>{
    const res = await  addOrderApi(user_id as string)
    console.log(res)

    // 把订单信息 存储在 localStorage 内
    window.localStorage.setItem('time' ,((res as unknown) as {time : string}).time)

}






// 准备一个 全选 按钮
const selectAll = computed(() =>{
    return list.value.every(item => item.flag)
})


// 准备一个个总价

const totalPrice = computed(() =>{
    return list.value.reduce((prev, item) =>{
        if(item.flag){
             return  prev + (item.originprice * item.num)
        }else{
            return prev
        }
   
    }, 0)
})


onMounted(()=>{ 
    testToken()
    cartList()
    hotList()
})







</script>

<style scoped lang="scss">
.sdy-cart{
    
    .me{
        box-sizing: border-box;
        padding: 10px;
        margin: 0 10px;
    }
    .top{
       display: flex;
        box-sizing: border-box;
        padding: 10px;
       
        > .select-item {
            width: 30px;
            
        }
        ul{
            flex:1;
        }
        
     }
  
      .notice-swipe{
        position: fixed;
        width: 100%;
        bottom: 50px;
        height: 40px;
        color: green;
        line-height: 40px;
        opacity: .5;
        

    }

.inp{
    width: 20px;
    text-align: center;
    margin:  0 10px ;
}
.buttom{
    margin:  2px 20px;
    font-size: 18px;
    font-weight: 500;
    color: skyblue;

}

}









    // .goods-list-box {
    // display: flex;
    // flex-wrap: wrap;
    // justify-content: space-evenly;

    // .goods-item {
    //   width: 45%;
    //   border: 1px solid #333;
    //   display: flex;
    //   flex-direction: column;
    //   justify-content: space-between;
    //   align-items: center;
    //   margin-bottom: 5px;
    //   overflow: hidden;
    //   padding-bottom: 5px;

    //   > p {
    //     margin: 0;
    //   }

    //   > img {
    //     width: 100%;
    //     height: 100px;
    //     display: block;
    //   }

    //   > .title {
    //     font-size: 12px;
    //   }

    //   > .price {
    //     font-size: 12px;
    //     color: #ccc;
    //     width: 100%;
    //     display: flex;
    //     justify-content: space-evenly;

    //     > .current {
    //       font-size: 16px;
    //       color: red;
    //     }

    //     > .old {
    //       text-decoration: line-through;
    //     }
    //   }

    //   > .tags {
    //     width: 100%;
    //     display: flex;
    //     justify-content: space-evenly;
    //   }
    // }
  
    // }

</style>